import React, { Component } from "react";
import { Button, Tooltip } from "antd";
import { connect } from "dva";
import { SearchOutlined } from "@ant-design/icons";
import QrCode from "qrcode-reader";
import styles from "./style.less";
import codePng from "./code.jpg";
import QRCode from "qrcode.react";
import Request, { Delete, Get } from "@/utils/request";
import LogoPng from "@/assets/images/logo.png";
@connect(({ mShanghuAnddhlb }) => mShanghuAnddhlb)
class Page extends Component {
  state = {
    id: this.props.match.params.id,
    detail: null
  };
  componentDidMount() {
    document.getElementById("root").style.minWidth = window.screen.width + "px";
    document.getElementById("root").style.width = window.screen.width + "px";
    console.log(this.state.id);
    this.getInfo();
    const { dispatch } = this.props;
    dispatch({
      type: "mShanghuAnddhlb/fetch"
    });
  }
  getInfo() {
    Get("/psy/mss/prize/get/" + this.state.id, {}).then(res => {
      let data = res.data;
      data["prize"]["explain"] = data["prize"]["explain"].replace(
        /\n/g,
        "<br />"
      );
      data["prize"]["explain"] = data["prize"]["explain"].replace(
        /\r/g,
        "<br />"
      );
      data["prize"]["explain"] = data["prize"]["explain"].replace(
        /\r\n/g,
        "<br />"
      );
      this.setState({
        detail: res.data
      });
    });
  }
  render() {
    const { text } = this.props;
    const { detail } = this.state;
    return (
      <div className={styles.container}>
        {/* <img
          className={styles.logopng}
          onClick={() => {
            this.reset();
          }}
          src={LogoPng}
        /> */}
        {detail ? (
          <div className={styles.wrap}>
            <div className={styles.jpTitle}>您的中奖信息</div>
            <div className={styles.codeWrap}>
              <QRCode
                value={this.state.id} //value参数为生成二维码的链接
                size={200} //二维码的宽高尺寸
                fgColor="#000000" //二维码的颜色
              />
            </div>
            <div
              className={
                detail.prize_state == "已使用" ? styles.jpName1 : styles.jpName
              }
            >
              {detail.prize.name}
            </div>
            <div
              className={
                detail.prize_state == "已使用"
                  ? styles.jpStatus1
                  : styles.jpStatus
              }
            >
              {detail.prize_state}
            </div>
            <div
              className={styles.jpSAddress}
              dangerouslySetInnerHTML={{ __html: detail["prize"]["explain"] }}
            ></div>
          </div>
        ) : (
          <div></div>
        )}
      </div>
    );
  }
}

export default Page;
